<template>
	<view class="wrap">
		<form  @submit="submit" >
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" 
						placeholder-class="line" 
						placeholder="请填写会员昵称" 
						name="nickname"
						v-model="nickname"
					 />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<u-upload ref="uUpload"
						name="avatarurl"
						:fileList="oldAvatarUrl"
						max-count="1"
						:action="action"
						upload-text="上传头像"
						:auto-upload="false" 
						@on-success="uploadsuccess"
						@on-error="uploaderror"
						@on-choose-complete="chooseimg"
						:form-data="formData"
						:header="header"
					></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio 
								v-for="(item, index) in sexlist" :key="index" 
								:name="item.value"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<input disabled type="text" 
						placeholder-class="line" 
						placeholder="2021-01-24" 
						name="birthday" 
						v-model="birthday"
					/>
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input
						disabled
						type="text"
					  	placeholder-class="line" 
					  	placeholder="省市区县、乡镇等" 
					  	name="region" 
					  	v-model="region"
					  />
				</view>
			</view>
			<regionPicker
				:visible.sync="regionVisible"
				mode="region"
				default-type="value"
				:hide-area="false"
				@confirm="onConfirm($event,'region')"
				ref="region" 
			></regionPicker>
			<u-picker 
				mode="time" 
				ref="uPicker" 
				v-model="birthdayShow" 
				@confirm="birthdayConfirm"
			/>
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset" >重置</button>
		</form>
	</view>	
</template>

<script>
	let app = getApp();
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components:{regionPicker},
		data() {
			return {
				id:'',//初始化修改数据id
				// 头像提交服务端地址
				action: this.$URL+`/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl:[],
				// 表单数据(不含头像信息)
				formData:{},
				// 初始化header头
				header:{},
				oldImg:'',//初始化旧图片
				regionVisible:false,//初始化地区选择器开关
				nickname:'',//初始化收件人姓名
				region:'北京市市辖区朝阳区',//初始化地区默认值
				birthday:'1992-02-14',
				birthdayShow:false,
				sexlist:[
						{value:1,name:'男'},
						{value:2,name:'女'},
					],
				sex:1//初始化会员性别
			}
		},
		
		onLoad(){
			this.getUserInfo(1); //  1  代表进入修改页面，获取用户信息
		},
			
		methods: {
			async submit(e){
				let sex =  this.sex; //获取性别
				// console.log(e)
				let {birthday,nickname,region} = e.mp.detail.value;
				this.header = {
					authorization:uni.getStorageSync("userInfo").token
				}
				this.formData = {
					id:this.id,sex,birthday,nickname,region,avatarurl:this.oldImg
				}
				
				// 判断是否有新的文件进行上传
				var files = this.$refs.uUpload.lists[0].file || null;
				// console.log(files)
				if(files == null){
					// 没有新的文件上传，走普通的修改即可
					let option = {
						url:"infoedit",
						data:{
							id:this.id,sex,birthday,nickname,region
						},
						method:"post",
						header:app.globalData.header
					}
					let result =  await this.$http(option);
					// console.log(result)
					if(result.data.code ==  403){
						// 过期了
						this.$tips.restore(this, app);
						uni.showModal({
							title: res.data.msg,
							content: "您确定重新登录么？",
							success(result) {
								// console.log(res)
								if (result.confirm) {
									// 同意登录
									uni.switchTab({
										url: "../user/user"
									})
								} else {
									// 不同意登录
									uni.switchTab({
										url: "../index/index"
									})
								}
							}
						})
					}else if(result.data.code ==200){
						// 正常
						this.getUserInfo(2)  //  2 修改之后调用的，然后更新当前缓存信息，跳转页面
					}
				}else{
					// 当有文件上传的时候，可以进行提交
					setTimeout(()=>{
						// 直接进行表单提交
						this.$refs.uUpload.upload();
					},500)
				}
				
				
			},
			// 1.获取用户默认信息
			async  getUserInfo(type){
				// api: getuserinfo
				// params: uid
				// header
				let header =  app.globalData.header;
				let uid =  app.globalData.userInfo.uid;
				var option = {
					url:"getuserinfo",
					data:{
						uid,
					},
					header,
				}
				let  res =  await this.$http(option);
				// console.log(res)
				// res.data.list[0]
				if(res.data.code ==  403){
					// 过期了
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.switchTab({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.switchTab({
									url: "../index/index"
								})
							}
						}
					})
				}else if(res.data.code ==200){
					let  userInfo = res.data.list[0];
					if(type == 1){
						// 正常请求操作
						// 获取数据成功		
						this.id = userInfo.id;
						this.oldAvatarUrl =[{url:this.$URL + userInfo.avatarurl}] ;
						this.nickname = userInfo.nickname;
						this.sex = userInfo.sex;
						this.birthday = userInfo.birthday;
						this.region = userInfo.region;
						this.oldImg =userInfo.avatarurl;//老的图片的地址
					}else  if(type ==2){
						// 修改过来的
						// console.log("修改过来的")
						// 更新本地缓存的信息
						// console.log(userInfo);
						userInfo.token = app.globalData.header.authorization; //token
						uni.setStorageSync("userInfo",userInfo);
						app.globalData.loginStatus = true;
						app.globalData.userInfo =userInfo;
						this.$tips.showtoast('修改成功')
						setTimeout(()=>{
							// // 跳转到user页面
							uni.switchTab({
								url:"../user/user"
							})
						},1500)
						
					}
					
				}
			},
			
			
			// 选择会员地区
			onConfirm(res){
				// console.log(res)
				this.region = res.result
			},
			// 监听本地选择图片
			chooseimg(lists, name){
			},
			// 性别标签切换
			radioGroupChange(e){
				// console.log(e)
				this.sex = e;
			},
		
			// 地址默认设置开关
			setDefault(e){
			},
		
			// 开始生日选择器
			showBirthdayPicker(){
				this.birthdayShow = true;
			},
			// 监听时期选择器
			birthdayConfirm(e){
				console.log(e)
				this.birthday = e.year +"-"+ e.month +"-"+e.day
			},
			
			// 图片上传成功触发
			uploadsuccess(data, index, lists, name){
				console.log(data,'上传成功')
				if(data.code ==200){
					// 上传成功
					this.getUserInfo(2)
				}
			},
			// 图片上传失败触发
			uploaderror(res, index, lists, name){
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>
